<!-- 员工管理页面 -->
<template>
  <div class="container">
    <div class=" flex gap-2 mt-1 justify-around">
      <div>
        <span>员工id</span>
        <el-input v-model="num" placeholder="请输入员工id" style="width: 240px"></el-input>
      </div>
      <div>
        <span>岗位名称</span>
        <el-input v-model="name" placeholder="请输入岗位名称" style="width: 240px"></el-input>
      </div>
      <div>
        <span>状态</span>
        <el-select v-model="state" placeholder="岗位状态" style="width: 240px">
          <el-option label="正常" value="0"></el-option>
          <el-option label="离职" value="1"></el-option>
          <!-- <el-option label="删除" value="2"></el-option> -->
        </el-select>
      </div>
      <div>
        <el-button type="primary" :prefix-icon="Search" @click="search"> <el-icon>
            <Search />
          </el-icon>查询</el-button>
        <el-button type="primary" :prefix-icon="Refresh">
          <el-icon>
            <Refresh />
          </el-icon>
          重置</el-button>
      </div>
    </div>
    <div class="m-1">
      <el-button type="primary" plain @click="dialogAdd = true">新增</el-button>
      <el-button type="success" plain @click="exportExcelData">导出为excel</el-button>
      <el-button type="warning" plain :disabled="true">删除</el-button>
    </div>
    <div class="pl-2">
      <el-table :data="paginatedData" style="width: 100%; height: 460px;">
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="code" label="员工代码" width="120" />
        <el-table-column prop="entryDate" label="入职日期" width="120" />
        <el-table-column prop="postLevelId" label="职级" width="120" />
        <el-table-column prop="deptId" label="部门ID" width="150" />
        <el-table-column prop="mobile" label="手机号" width="150" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 0" type="success">在职</el-tag>
            <el-tag v-else-if="scope.row.status == 1" type="warning">离职</el-tag>
            <el-tag v-else type="danger">删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="handleClick(row)">修改</el-button>
            <el-button link type="primary" size="small" @click="deleteUser(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background layout="sizes, prev, pager, next" :total="total" :current-page="currentPage"
        :page-size="pageSize" @size-change="handleSizeChange" @current-change="handlePageChange" />
    </div>
  </div>

  <!-- 添加员工板块 -->
  <el-dialog v-model="dialogAdd" title="添加员工">
    <el-form label-width="120px" class="text-center pt-1 gap-1 items-center justify-center">
      <el-form-item label="员工名称">
        <el-input v-model="userAdd.name" placeholder="请输入员工名称" />
      </el-form-item> 
      <el-form-item label="员工编号" >
        <el-input v-model="userAdd.id" :disabled="true"  placeholder="请输入员工编号" />
      </el-form-item>
      <el-form-item label="岗位名称">
        <el-input v-model="userAdd.graduateSchool" placeholder="请输入岗位名称" />
      </el-form-item>
      <el-form-item label="所属部门">
        <!-- <el-input v-model="userAdd.deptId" placeholder="请输入部门id" /> -->
        <el-select v-model="userAdd.deptId" placeholder="请选择部门">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="code">
        <el-input v-model="userAdd.code" placeholder="请输入code" />
      </el-form-item>
      <!-- <el-form-item label="角色">
        <el-input v-model="userAdd.entryDate" placeholder="请输入员工角色" />
      </el-form-item> -->
      <el-form-item label="状态">
        <el-select v-model="userAdd.status" placeholder="岗位状态">
          <el-option label="正常" value="1"></el-option>
          <el-option label="停用" value="0"></el-option>
          <!-- <el-option label="离职" value="2"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="userAdd.email" placeholder="请输入邮箱地址" />
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="userAdd.mobile" placeholder="请输入手机号码" />
      </el-form-item>
      <el-form-item label="居住地">
        <el-input v-model="userAdd.habitation" placeholder="请输入居住地" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="userAdd.sex" placeholder="请选择性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-date-picker v-model="userAdd.birthday" type="date" placeholder="选择出生日期" format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="政治面貌">
        <el-input v-model="userAdd.politicalCode" placeholder="请输入政治面貌代码" />
      </el-form-item>
      <el-form-item label="婚姻状况">
        <el-select v-model="userAdd.maritalStatus" placeholder="请选择婚姻状况">
          <el-option label="未婚" value="0"></el-option>
          <el-option label="已婚" value="1"></el-option>
          <el-option label="离异" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogAdd = false">取消</el-button>
        <el-button type="primary" @click="addUser">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 修改员工板块 -->
  <el-dialog v-model="dialogChange" title="修改员工">
    <el-form label-width="120px" class="text-center pt-1 gap-1 items-center justify-center">
      <el-form-item label="员工名称">
        <el-input v-model="userChange.name" placeholder="请输入员工名称" />
      </el-form-item>
      <el-form-item label="员工编号">
        <el-input v-model="userChange.id" placeholder="请输入员工编号" />
      </el-form-item>
      <el-form-item label="岗位名称">
        <el-input v-model="userChange.graduateSchool" placeholder="请输入岗位名称" />
      </el-form-item>
      <el-form-item label="角色">
        <el-input v-model="userChange.entryDate" placeholder="请输入员工角色" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="userChange.status" placeholder="岗位状态">
          <el-option label="在职" value="0"></el-option>
          <el-option label="离职" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="userChange.email" placeholder="请输入邮箱地址" />
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="userChange.mobile" placeholder="请输入手机号码" />
      </el-form-item>
      <el-form-item label="居住地">
        <el-input v-model="userChange.habitation" placeholder="请输入居住地" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="userChange.sex" placeholder="请选择性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-date-picker v-model="userChange.birthday" type="date" placeholder="选择出生日期" format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="政治面貌">
        <el-input v-model="userChange.politicalCode" placeholder="请输入政治面貌代码" />
      </el-form-item>
      <el-form-item label="婚姻状况">
        <el-select v-model="userChange.maritalStatus" placeholder="请选择婚姻状况">
          <el-option label="未婚" value="0"></el-option>
          <el-option label="已婚" value="1"></el-option>
          <el-option label="离异" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogChange = false">取消</el-button>
        <el-button type="primary" @click="changeUser">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { Refresh, Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { getEmployeeList, updateEmployee, addEmployee, listEmployee, deptList, getHeader,userRegister ,exportEmployee} from '@/api';
import Employee from './type';
import {exportExcel} from '@/utils/exportExcel' 

const options = ref([])

const userAdd = ref<Employee>({
  birthday: '1989-12-28',
  code: '1',
  deptId: null,
  email: 'zhangsan@example.com',
  entryDate: '1990-06-27',
  graduateSchool: '清华大学',
  habitation: '北京市海淀区',
  highestDegreeCode: '01',
  highestEducationCode: '02',
  id: '1',
  idCard: '110000198001010000',
  leaveDate: null,
  majorCode: '计算机科学与技术',
  maritalStatus: 2,
  mobile: '13800138000',
  name: '张2451',
  nationCode: '01',
  nativePlace: '北京',
  politicalCode: '01',
  postLevelId: '1',
  sex: 1,
  status: 0,
  userId: '1',
});



// 员工信息及弹窗状态
const userChange = ref<Employee>({
  birthday: '',
  code: '',
  deptId: 1,
  email: '',
  entryDate: '',
  graduateSchool: '',
  habitation: '',
  highestDegreeCode: '',
  highestEducationCode: '',
  id: '',
  idCard: '',
  leaveDate: null,
  majorCode: '',
  maritalStatus: 0,
  mobile: '',
  name: '',
  nationCode: '',
  nativePlace: '',
  politicalCode: '',
  postLevelId: '',
  sex: 0,
  status: 0,
  userId: '',
});
const excelHeader = [
    "编号", "姓名", "代码", "电子邮件", "手机号码", "身份证号", "生日", "性别",
    "民族代码", "政治面貌代码", "籍贯", "毕业院校", "专业代码", "最高学历代码",
    "最高学位代码", "居住地", "婚姻状况", "入职日期", "离职日期", "部门编号",
    "岗位级别编号", "用户编号", "状态"
];
const num = ref(''); // 员工代码筛选条件
const name = ref(''); // 员工姓名筛选条件
const state = ref<number | null | string>(null); // 状态筛选条件
const dialogChange = ref(false);
const dialogAdd = ref(false);

// 表格及分页数据
const tableData = ref<Employee[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const paginatedData = ref<Employee[]>([]);

const init = () => {
  getEmployeeList().then((res) => {
    tableData.value = res.data.data; // 假设接口返回数据在 res.data
    total.value = res.data.length;
    updateTableData();
  });
  deptList().then((res) => {
    options.value = res.data.data.map((item) => {
      return {
        id: item.id,    // 使用id和name字段
        name: item.name,
      };
    });
  });

}

const exportExcelData = () => {
  console.log(tableData.value);
  
  exportExcel(tableData.value, '员工信息')
}


// 获取员工列表并初始化分页
onMounted(() => {
  init();
});

// 分页计算函数
const updateTableData = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  paginatedData.value = tableData.value.slice(start, end);
};

const deleteUser=(row)=>{
  updateEmployee({
    ...row,
    status: 1,
  }).then((res) => {
    if (res.data.code === 200) {
      console.log('删除成功');
      init();
    }
  })
}

const search = () => {
  // 查询已经离职的员工
  if (state.value === '1') {
    listEmployee().then((res) => {
      console.log(res.data.data);
      tableData.value = res.data.data;
      total.value = res.data.length;
      updateTableData();
    })
  } else {
    getEmployeeList().then((res) => {
      tableData.value = res.data.data; // 假设接口返回数据在 res.data
      total.value = res.data.length;
      updateTableData();
    });
  }
}
// 添加员工
const addUser = () => {
  console.log(userAdd.value);
  userAdd.value.userId = userAdd.value.id;
  addEmployee(userAdd.value).then((res) => {
    if (res.data.code === 200) {
      ElMessage.success({ message: '添加成功', type: 'success' });
      userRegister({
        status: 0,
        role:'employee',
        name: userAdd.value.name,
        account: userAdd.value.mobile,
        password: '123456',
      }).then((res) => {
        console.log('添加账号成功');
      })
      init();
      dialogAdd.value = false;
    } else {
      ElMessage.error({ message: '添加失败', type: 'error' });
    }
  })
}

// 分页事件处理
const handlePageChange = (page: number) => {
  currentPage.value = page;
  updateTableData();
};

const handleSizeChange = (size: number) => {
  pageSize.value = size;
  updateTableData();
};

// 数据变更时更新分页
watch(() => tableData.value, () => {
  total.value = tableData.value.length;
  updateTableData();
});

// 操作按钮
const handleClick = (data: Employee) => {
  console.log(data);
  dialogChange.value = true;
  userChange.value = { ...data }; // 深拷贝防止数据同步问题
};

const changeUser = () => {
  console.log(userChange.value);
  updateEmployee(userChange.value).then((res) => {
    console.log(res);
    getEmployeeList().then((res) => {
      tableData.value = res.data.data;
      total.value = res.data.length;
      updateTableData();
    });
    ElMessage.success({ message: '修改成功', type: 'success' });
  });
  dialogChange.value = false;

};
</script>


<style lang="less" scoped></style>
